<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- winphone 点击无高光 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>演示例子</title>
  </head>
  <body>
<style>
*{margin: 0;padding: 0;}
html{background-color:rgba(255,2,14,0.1);}
.wsj-audio-player .yt{display: -webkit-flex;display: flex;}
.wsj-audio-player .yt-f1{position: relative;-webkit-flex: 1;flex: 1;}
.wsj-audio-player .audio-wrap{padding:10px;background-color:#fff;border-radius:4px;}
.wsj-audio-player .baoguo{position: relative;margin:0 5px;height:20px;}
.wsj-audio-player .underlay{width: 100%;height: 6px;border-radius:1100px;background-color: #d8d8d8;-webkit-align-self:center;align-self:center;}
.wsj-audio-player .range-pointer{position: relative;width: 0;height: 6px;border-radius:1100px;background-color: #44bfa3;}
.wsj-audio-player .range-pointer-round{position:absolute;transform: translateX(-50%);top:-5px;width:16px;height:16px;border-radius:50%;background-color:#44bfa3;}
.wsj-audio-player .pass-time{font-size:12px;margin:0 8px 0 10px;-webkit-align-self:center;align-self:center;}
.wsj-audio-player .sum-time{font-size:12px;margin:0 8px;-webkit-align-self:center;align-self:center;}
</style>
<div style="padding:10px;">
  <div class="mp3">
    <audio src="qiFenLe.mp3" controls></audio>
  </div>
  <br />
  <pre>
    在实际使用中,可把audio标签的controls属性删除
    如果一个页面使用多个播放器,并且一个播放时,其他暂停.那么自己把new出来的实例进行pause()
  </pre>
  <button id="wsjaudio">点击此处,对new出来的实例进行暂停</button>
</div>

<script>
var inst=new WsjAudio(document.querySelector(".mp3"));
document.getElementById('wsjaudio').onclick=function(){
  inst.eleAudio.pause()
}
function WsjAudio(ele) {
    const audioHTML = ele.innerHTML;
    ele.classList.add('wsj-audio-player');
    ele.innerHTML = renderDOM() + audioHTML;

    var isTouch = "ontouchstart" in window;
    var eStart = isTouch ? "touchstart" : "mousedown";
    var eMove = isTouch ? "touchmove" : "mousemove";
    var eEnd = isTouch ? "touchend" : "mouseup";
    var eCancel = isTouch ? "touchcancel" : "mouseup";
    var that = this
    that.eleAudio = ele.querySelector('audio')
    that.elePlayIcon = ele.querySelector('svg')
    that.eleBaoGuo = ele.querySelector('.baoguo')
    that.eleRangePointer = ele.querySelector('.range-pointer')
    ele.querySelector('.pass-time').innerHTML = secondsToTime(0)
    ele.querySelector('.sum-time').innerHTML = secondsToTime(0)
    that.offsetX = offsetXY(that.eleBaoGuo).left//这个要放在renderDOM后计算,因为要把pass-time的宽度计算进去
    console.log('======that.offsetX', that.offsetX);
    that.startX = 0//实际进度条长度
    that.sumX = 0//移动后的长度
    that.alreadyMove = false//判断用户对进度条是点击还是拖动

    that.showPlayIcon = function (bool) {
        if (bool) {
            ele.querySelector('.play-pause-btn__icon').setAttribute('d', 'M18 12L0 24V0')//播放按钮
        } else {
            ele.querySelector('.play-pause-btn__icon').setAttribute('d', 'M0 0h6v24H0zM12 0h6v24h-6z')//暂停按钮
        }
    }
    that.eleAudio.addEventListener('loadedmetadata', () => {
        ele.querySelector('.sum-time').innerHTML = secondsToTime(that.eleAudio.duration);
    });

    that.eleAudio.addEventListener('play', () => {
      console.log('======播放中');
      that.showPlayIcon(false)
    });
    that.eleAudio.addEventListener('pause', () => {
      console.log('======暂停了');
      that.showPlayIcon(true)
    });

    that.elePlayIcon.addEventListener('click', () => {
        that.eleBaoGuo.addEventListener(eStart, that.handleStart, false);
        if (that.eleAudio.paused) {
            that.eleAudio.play()
            that.showPlayIcon(false)
        } else {
            that.eleAudio.pause()
            that.showPlayIcon(true)
        }
    });

    that.eleAudio.addEventListener('timeupdate', () => {
        var current = that.eleAudio.currentTime;
        var percent = current / that.eleAudio.duration;
        that.eleRangePointer.style.width = percent * that.eleBaoGuo.offsetWidth + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = percent * that.eleBaoGuo.offsetWidth + 'px'
        ele.querySelector('.pass-time').innerHTML = secondsToTime(current);
    });

    that.eleAudio.addEventListener('ended', () => {
        that.eleAudio.currentTime = 0
        ele.querySelector('.pass-time').innerHTML = secondsToTime(0);
        that.showPlayIcon(true)
    });


    that.handleStart = function (e) {
        var ev = isTouch ? e.touches[0] : e;
        that.alreadyMove = false
        that.eleAudio.pause()
        that.startX = ev.clientX - that.offsetX
        that.eleRangePointer.style.width = that.startX + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = that.startX + 'px'
        document.addEventListener(eMove, that.handleMove, false);
        document.addEventListener(eEnd, that.handleEnd, false);
        document.addEventListener(eCancel, that.handleEnd, false);
    }
    that.handleMove = function (e) {
        var ev = isTouch ? e.touches[0] : e;
        that.alreadyMove = true
        var deltaX = ev.clientX - that.offsetX - that.startX
        that.sumX = that.startX + deltaX
        //console.log('======sumX',sumX);

        if (that.sumX > that.eleBaoGuo.offsetWidth) {
            that.sumX = that.eleBaoGuo.offsetWidth
        }
        if (that.sumX < 3) {
            that.sumX = 0
        }
        that.eleRangePointer.style.width = that.sumX + 'px'
        that.eleRangePointer.querySelector('.range-pointer-round').style.left = that.sumX + 'px'
        ele.querySelector('.pass-time').innerHTML = secondsToTime(that.sumX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration)

    }
    that.handleEnd = function (e) {
        that.eleAudio.play()


        if (!that.eleAudio.paused) {
            that.showPlayIcon(false)
        }

        console.log("======开始注销");
        if (that.alreadyMove) {
            that.eleAudio.currentTime = that.sumX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration
        } else {
            that.eleAudio.currentTime = that.startX / that.eleBaoGuo.offsetWidth * that.eleAudio.duration
        }

        document.removeEventListener(eMove, that.handleMove);
        document.removeEventListener(eEnd, that.handleEnd);
        document.removeEventListener(eCancel, that.handleEnd);
    }



    function offsetXY(element) {
        var pos = { left: 0, top: 0 };
        var parents = element.offsetParent;
        console.log('======parents', parents);
        pos.left += element.offsetLeft;
        pos.top += element.offsetTop;

        while (parents && !/html|body/i.test(parents.tagName)) {
            pos.left += parents.offsetLeft;
            pos.top += parents.offsetTop;
            parents = parents.offsetParent;
        }
        return pos;
    }
    function secondsToTime(seconds) {
        const min = Math.floor(seconds / 60);
        const sec = Math.floor(seconds % 60);
        return `${(min < 10) ? `0${min}` : min}:${(sec < 10) ? `0${sec}` : sec}`;
    }
    function renderDOM() {
        var str = `<div class="yt audio-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewbox="0 0 18 24">
      <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-btn__icon"></path>
  </svg>
  <div class="yt-self-center pass-time"></div>
    <div class="yt yt-f1 baoguo">
      <div class="underlay">
        <div class="range-pointer">
          <div class="range-pointer-round"></div>
          </div>
        </div>

    </div>
    <div class="sum-time"></div>
   </div>`
        return str
    }
}

</script>
  </body>
</html>
